var userTemplate = '\
	<label class="radio-inline">\
	  <input type="radio" checked name="targetType" value="1"> 到房间\
	</label>\
	<label class="radio-inline">\
	  <input type="radio" name="targetType" value="2"> 到会员\
	</label>\
	<div class="message-container form mt10">\
		<div><input type="text" class="js_input form-control" placeholder="请填写要发送的消息..."/></div>\
		<div class="clearfix mt10"><div class="pull-right btn btn-primary js_send">发送</div></div>\
	</div>\
	<div class="table-container" style="display:none">\
		<table class="table table-hover table-condensed">\
		<thead>\
		<th><input type="checkbox" class="checkAll"/></th><th>昵称</th><th>注册时间</th>\
		<thead>\
		<tbody>\
			<%_.each(users, function(user, index){%>\
			<tr>\
				<td>\
					<input type="checkbox" value="<%=user.id%>">\
				</td>\
				<td><%=user.nickName%></td>\
				<td><%=new Date(user.createTime).Format("yyyy-MM-dd hh:mm:ss")%></td>\
			</tr>\
			<%})%>\
		</tbody>\
		</table>\
	</div>';
$('.js_broadcast').qtip({
	content : {
		title : '发送消息',
		text : function(event, api) {
			$.ajax({
				url : global.chat_url + '/api/room/' + $(event.target).data('id') + '/users'
			}).done(function(data) {
				var html = _.template(userTemplate)({users: data});
				api.set('content.text', html);
				$('.table-container', api.elements.content).mCustomScrollbar({
					theme : 'minimal-dark'
				});
			}).fail(function(xhr, status, error) {
				api.set('content.text', status + ': ' + error);
			});

			return 'Loading...';
		},
		button: true
	},
	show : {
		event : 'click',
		modal : {
			on : true,
			blur : false
		}
	},
	hide : false,
	position : {
		my : 'center',
		at : 'center',
		target : $(window)
	},
	style : {
		width : 550,
		classes : 'qtip-send-message qtip-light qtip-shadow qtip-rounded'
	},
	events: {
		render: function(event, api){
			$(api.elements.content).on('click', 'input.checkAll',  function(e){
				$('tbody input[type=checkbox]', api.elements.content)[0].checked = this.checked;
			});
			$(api.elements.content).on('click', 'input[name=targetType]',  function(e){
				if(this.value == 1){
					$('.table-container', api.elements.content).hide();
				}else if(this.value == 2){
					$('.table-container', api.elements.content).show();
				}
			});
			
			$(api.elements.content).on('click', '.js_send', function(e){
				var targetType = $('input[name=targetType]:checked', api.elements.content).val(),
					userIds = [],
					method;
				if(targetType == 2 && $('tbody input[type=checkbox]:checked', api.elements.content).length == 0){
					warn('提示', '请选择要发送消息的会员');
					return;
				}
				if($('.js_input', api.elements.content).val().trim() == ''){
					warn('提示', '请输入要发送的消息');
					return;
				}
				$('input[type=checkbox]:checked', api.elements.content).each(function(i, ele){
					userIds.push(ele.value);
				});
				if(targetType == 1){
					method = sendMessage;
				}else if(targetType == 2){
					method = sendMessageToUser;
				}
				var roomId = $(api.elements.target).data('id'),
					content = $('.js_input', api.elements.content).val(),
					self = $(this);
				if(content.trim() == ''){
					return;
				}
				self.button('loading');
				method($('.js_input', api.elements.content).val(), function(){
					success('发送成功');
					self.button('loading');
					$.post('/message/send', {
						content: content,
						roomId: roomId
					}, function(res){
						if(res.status == 'ok'){
							$('.js_input', api.elements.content).val('')
							self.button('reset');
							api.hide();
						}
					});
				}, api.target.data('id'), userIds);
			});
		}
	}
});